<!--
//
// Trigger.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/11.
//
-->
<template>
    <div class="Index">
        <!-- 筛选区 -->
        <div class="search-bar">
            <div class="search-item">
                <el-button v-permission="permission.add" type="primary" @click="addData">
                    <el-icon style="margin-right: 4px">
                        <Plus />
                    </el-icon>
                    添加
                </el-button>
                <el-divider direction="vertical" style="height: 30px"></el-divider>
            </div>
            <div class="search-item">
                <div class="label" style="">处理人</div>
                <el-select v-model="requestBody.currentHandlerId" clearable style="width: 100px;">
                    <el-option :value="0" label="全部" />
                    <el-option :value="myInfo.id" label="我的" />
                </el-select>
            </div>
            <div class="search-item">
                <div class="label">程序</div>
                <el-select v-model="requestBody.programId" clearable style="width: 160px;">
                    <el-option :value="0" label="全部" />
                    <el-option v-for="item in state.programList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </div>
            <div class="search-item">
                <div class="label">标题</div>
                <el-input v-model="requestBody.name" clearable style="width: 200px;" />
            </div>
            <div class="search-item">
                <div class="label">类型</div>
                <el-select v-model="requestBody.type" clearable style="width: 100px;">
                    <el-option :value="0" label="全部" />
                    <el-option :value="1" label="需求" />
                    <el-option :value="2" label="优化" />
                    <el-option :value="3" label="缺陷" />
                </el-select>
            </div>
            <div class="search-item">
                <div class="label" style="width: 80px">紧急程度</div>
                <el-select v-model="requestBody.level" clearable style="width: 100px;">
                    <el-option :value="0" label="全部" />
                    <el-option :value="1" label="低" />
                    <el-option :value="2" label="中" />
                    <el-option :value="3" label="高" />
                    <el-option :value="4" label="急" />
                </el-select>
            </div>
            <div class="search-item">
                <div class="label">状态</div>
                <el-select v-model="requestBody.stateList" clearable collapse-tags collapse-tags-tooltip multiple style="width: 160px;">
                    <el-option :value="1" label="未解决" />
                    <el-option :value="2" label="待审核" />
                    <el-option :value="3" label="已拒绝" />
                    <el-option :value="4" label="已完成" />
                    <el-option :value="5" label="已关闭" />
                </el-select>
            </div>
            <div class="search-item" style="margin-left: 10px">
                <el-button plain type="primary" @click="searchClicked">
                    <el-icon style="margin-right: 4px">
                        <Search />
                    </el-icon>
                    查询
                </el-button>

            </div>
        </div>

        <!-- 内容 -->
        <div class="container">
            <!--checkbox设置 :checkbox-config="{trigger: 'row', highlight: true}" -->
            <!--radio设置 :radio-config="{trigger: 'row', highlight: true}" -->
            <vxe-table ref="VXETable" :column-config="{ resizable: false}" :data="state.list" :height="tableHeight" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @cell-click="onInfo" @radio-change="() => {}">
                <template #empty>
                    <el-empty :image-size="100" />
                </template>
                <!--                <vxe-column fixed="left" title="" type="seq" width="50" />-->
                <vxe-column field="code" :fixed="$fixedColumn('left')" title="任务编号" width="80">
                    <template #default="{row}">
                        <span style="font-weight: bold;color: var(--el-color-primary)">#{{ row.code }}</span>
                    </template>
                </vxe-column>
                <vxe-column align="center" field="state" :fixed="$fixedColumn('left')" title="状态" width="90">
                    <template #default="{row}">
                        <el-tag v-if="row.state === 1" type="danger">未解决</el-tag>
                        <el-tag v-if="row.state === 2" effect="dark" type="warning">待审核</el-tag>
                        <el-tag v-if="row.state === 3" effect="dark" type="danger">已拒绝</el-tag>
                        <el-tag v-if="row.state === 4" effect="dark" type="success">已完成</el-tag>
                        <el-tag v-if="row.state === 5" effect="dark" type="info">已关闭</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="name" min-width="200" title="标题"></vxe-column>
                <vxe-column align="center" field="type" title="类型" width="80">
                    <template #default="{row}">
                        <el-tag v-if="row.type === 1" effect="dark" type="primary">需求</el-tag>
                        <el-tag v-if="row.type === 2" effect="dark" type="success">优化</el-tag>
                        <el-tag v-if="row.type === 3" effect="dark" type="danger">缺陷</el-tag>
                    </template>
                </vxe-column>
                <vxe-column align="center" field="level" title="紧急程度" width="100">
                    <template #default="{row}">
                        <el-tag v-if="row.level === 1" effect="dark" type="primary">低</el-tag>
                        <el-tag v-if="row.level === 2" effect="dark" type="warning">中</el-tag>
                        <el-tag v-if="row.level === 3" effect="dark" type="danger">高</el-tag>
                        <el-tag v-if="row.level === 4" color="#7103b8" effect="dark" style="border-color: #7103b8">急</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="createdUserName" title="创建人" width="100"></vxe-column>
                <vxe-column field="currentHandlerName" title="处理人" width="100"></vxe-column>
                <vxe-column field="startTime" title="开始时间" width="200">
                    <template #default="{row}">
                        <g-date-time-preview :value="row.startTime" />
                    </template>
                </vxe-column>
                <vxe-column field="endTime" title="截止时间" width="200">
                    <template #default="{row}">
                        <g-date-time-preview :value="row.endTime" icon-color="#c45656" />
                    </template>
                </vxe-column>
            </vxe-table>
            <div class="page-config">
                <vxe-pager v-model:current-page="requestParams.pageIndex" v-model:page-size="requestParams.pageSize" :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" :page-sizes="pageConfig.sizes" :total="pageConfig.total" background size="mini" @page-change="onPageChange" />
            </div>
        </div>
    </div>
    <EditForm ref="editForm" />
    <teleport to="body">
        <Info ref="info" @delete="deleteData" @edit="editData" @reload="reload" />
    </teleport>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"
import EditForm from "./EditForm.vue"
import Info from "./Info.vue"

const {$message, $fixedColumn} = window;

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
const myInfo = computed(() => store.getters.userInfo);
const tableHeight = computed(() => store.getters.layoutType === "mobile" ? "" : store.getters.containerHeight - 150)
// 响应式数据
const state = reactive({
    // 表格数据加载中
    isLoading: false,
    // 表格数据
    list: [],
    // 程序列表
    programList: []
})

// 当前页面功能权限
const permission = {
    add: "DebugInfo:AddDebugInfo",
    delete: "DebugInfo:DeleteDebugInfo",
    edit: "DebugInfo:UpdateDebugInfo",
};

// 请求query参数
const requestParams = reactive({
    orderCol: "createdTime",
    isDesc: false,
    pageIndex: 1,
    pageSize: 20,
});
// 请求body参数
const requestBody = reactive({
    currentHandlerId: 0,
    programId: 0,
    type: 0,
    level: 0,
    stateList: [1, 2, 3],
})

// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})

const filters = {
    dateTime(val, format = "YYYY-MM-DD HH:mm:ss") {
        if (!val) return "";
        return $dayjs(val).format(format);
    }
}

/**
 * 详情
 * @param row
 */
const info = ref()

function onInfo({row}) {
    info.value.show({
        options: {...row},
        ok() {
            reload()
        }
    })
}


const editForm = ref();

// 添加
function addData() {
    const options = {
        createdUserName: myInfo.value.realName
    }
    options.programId = requestBody.programId === 0 ? null : requestBody.programId;
    editForm.value.show({
        title: "添加",
        options: {...options},
        ok: () => {
            reload(true);
        }
    })
}

// 删除
async function deleteData({id}) {
    console.danger("删除: ", id)
    const {success, data} = await api.DeleteDebugInfo({id});
    if (!success) return 0;
    info.value?.close();
    reload();
    $message.success("删除成功")
}

/**
 * 修改
 * @param row
 * @param callback 如果是从详情页面触发的会有这个，调用callback 详情页面会重新加载详情
 */
function editData(row, callback) {
    editForm.value.show({
        title: "修改",
        options: {...row},
        ok: () => {
            callback && callback()
            reload();
        }
    })
}

// 点击搜索
function searchClicked() {
    console.primary("搜索条件: ", requestBody)
    reload(true);
}

// 查询列表
async function loadList() {
    const params = {
        ...requestParams
    };
    const body = {
        ...requestBody
    };
    body.currentHandlerId = body.currentHandlerId === 0 ? null : body.currentHandlerId;
    body.programId = body.programId === 0 ? null : body.programId;
    body.type = body.type === 0 ? null : body.type;
    body.type = body.type === 0 ? null : body.type;
    body.level = body.level === 0 ? null : body.level;
    state.isLoading = true;
    const {success, data} = await api.GetDebugPageList(params, body);
    state.isLoading = false;
    if (!success) return 0;
    const {items, totalCount} = data;
    state.list = items;
    pageConfig.total = totalCount;
}

// 分页事件
function onPageChange({type}) {
    if (type === "current") {
        loadList()
    }
    if (type === "size") {
        reload(true)
    }
}

// 刷新
function reload(resetPageIndex) {
    if (resetPageIndex) requestParams.pageIndex = 1;
    loadList()
}

/**
 * 设置默认筛选条件
 */
function setDefaultRequestBody() {
    requestBody.currentHandlerId = myInfo.value?.id;
}


onMounted(() => {
    setDefaultRequestBody()
    api.GetProgramList({}).then(res => {
        state.programList = res.data || [];
    })
    loadList()
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .search-bar {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 10px 0 10px;
        background: #fff;
        margin-bottom: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
        border-left: 4px solid var(--el-color-primary);
        box-sizing: border-box;

        .search-item {
            display: inline-flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 10px;

            .label {
                padding-right: 10px;
                font-size: 14px;
                color: #333;
                margin-left: 10px;
                width: 50px;
                text-align: right;
            }
        }
    }

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }
}
</style>
